<template>
  <el-dialog :visible.sync="visible" :close-on-click-modal="false"
    :title="$t(SkuOutbound ? 'label_sku_select' : 'label_box_code_select')" custom-class="dialog_auto">


    <el-form :label-width="$globalCss.formLabelWidth_default" label-position="right" ref="TaskAssignForm">
      <el-form-item :label="$t('label_current_search_warehouse')">
        <span class="bold">{{ form.warehouseName }} / {{ form.warehouseCode }}</span>
      </el-form-item>

      <el-form-item :label="$t('label_sku_name_or_code')">
        <sku_selec_input v-model="form.skuIds" class="w_fill" :customerId="form.customerId" multiple />
      </el-form-item>
      <!-- <el-form-item :label="$t('label_batch_code')">
        <ex_super_input v-model="form.batchNo" class="w_fill"></ex_super_input>
      </el-form-item> -->
      <el-form-item :label="$t('label_batch_date')" v-if="!SkuOutbound">
        <ex_select_auto v-model="form.batchDate" class="w_fill" clearable @input="reloadTable"
          :dependentId="`${form.warehouseId}|${form.customerId}|${form.bizType}|${form.skuIds}`" :urlParams="() => {
            return {
              skuIds: form.skuIds,
              warehouseId: form.warehouseId,
              customerId: form.customerId,
              bizType: form.bizType,
            }
          }" :url="$url['oms/queryBatchList']" :option="it => ({ label: it, value: it })" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changeSku">{{ $t('label_query') }}</el-button>
      </el-form-item>


      <el-form-item label-width="0">
        <ex_super_table ref="MainTable" :model="tableModel" :url="tableUrl" :attrs="{ autoPage: true, autoLoad: false }"
          :urlDataHandle="urlDataHandle" height="500" @selection-change="e => selection = e" />
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog_footer">
      <el-button @click="visible = false">{{ $t('label_cancel') }}</el-button>
      <el-button type="primary" @click="submitReady">{{ $t('label_submit') }}</el-button>
    </span>

  </el-dialog>
</template>

<script>
import role_system_mixin from "@/mixin/role_system_mixin";

import sku_selec_input from '@/component/sku_selec_input'
export default {
  mixins: [role_system_mixin],
  components: { sku_selec_input },
  data() {
    return {

      visible: false,
      skuIds: [],

      form: {
        bizType: "TOB",
        batchDate: null,
        outboundProductType: "PRODUCT_OUTBOUND",
        warehouseId: null,
        warehouseName: null,
        warehouseCode: null,
        customerId: null,
        customerName: null,
        customerCode: null,
        skuIds: [],
      },
      selection: [],

      tableUrl: '',//'/oms-api/client/StockSkuQueryClientRpc/query.json',


      tableModel: [
        { type: 'selection', clickToggle: true, },
        { key: 'skuName', label: 'label_sku_name', 'width': 130},
        { key: 'skuNameEn', label: 'label_sku_name_en', 'width': 130 },
        { key: 'skuBarcode', label: 'label_sku_code', 'width': 130, if: () => this.SkuOutbound },
        { key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 140, if: () => this.SkuOutbound },
        // {
        //     key: 'batchNo', label: 'label_batch_code', 'min-width': 140
        // },
        { key: 'cartonSpec', label: 'label_sku_carton_spec', 'width': 130, if: () => this.TOB && this.SkuOutbound },
        { key: 'stockUsage', label: 'label_stock_usage', 'width': 130, formatter: (r, c, v, i) => this.$enumShow(v, "StockUsageEnum")},
        {
          key: 'usableQty', label: 'label_usable_count', 'width': 130, if: () => this.SkuOutbound
        },
        { key: 'subContainerCode', label: 'label_box_code', 'min-width': 150, if: () => !this.SkuOutbound },
      ],
    }
  },
  props: {


  },

  computed: {
    TOB() {
      return this.form.bizType == 'TOB'
    },
    SkuOutbound() {
      return this.form.outboundProductType == 'PRODUCT_OUTBOUND'
    },
  },
  methods: {
    urlDataHandle(res) {
      if (_.isEmpty(res.data.rows)) {
        this.$message.error(this.$t("tip_warehouse_no_found_sku_store"))
        return []
      }
      res.data.rows.forEach(it => {
        it.cartonSpec = it.skuPackageNum
      })
      return res.data.rows
    },
    urlParams(params) {
      // console.log(this.form, _.pick(this.form, ['warehouseId', 'skuIds', 'customerId', 'bizType']))
      return Object.assign({}, params, _.pick(this.form, ['warehouseId', 'skuIds', 'customerId', 'bizType', 'batchDate']))
    },
    changeSku(e) {
      // this.$set(this.form, 'skuIds', e)
      this.$refs.MainTable.loadData(this.urlParams({}));
    },
    reloadTable(e) {
      this.$refs.MainTable.loadData(this.urlParams({}));
    },
    show(item) {
      this.visible = true
      if (this.$refs.MainTable) this.$refs.MainTable.clearSelection();

      const eqKeys = ['warehouseId', 'customerId', 'bizType', 'outboundProductType']
      if (eqKeys.some(k => this.form[k] != item[k])) {
        this.form = _.clone(item)
        this.skuIds = []
        this.form.skuIds = []
        if (this.SkuOutbound) {
          this.tableUrl = this.$url['oms/queryStockSku']
        } else {
          this.tableUrl = this.$url['oms/queryStockBox']
        }
        this.$nextTick(() => {
          // console.log("show")
          this.$refs.MainTable.loadData(this.urlParams({}));
        })
      }

    },
    hide() {
      this.visible = false
    },
    submitReady() {
      // if (this.SkuOutbound && this.selection.some(r => this.TOB ? (r.tbUsableQty <= 0) : (r.tcUsableQty <= 0))) {
      //   return this.$message.error(this.$t('tip_no_add_userable_zero_sku'))
      // }
      this.submit()
    },

    submit() {
      let select = this.selection;
      if (select.length == 0) {
        return this.$message.error(this.$t("tip_skuSelect_noSelect"))
      }
      this.$emit('submitSuccess', select)
      this.visible = false
    },
  }
}
</script>
